<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>站点二级详情页面</title>
    <link rel="stylesheet" href="//static/css/bootstrap.min.css">
    <link rel="stylesheet" href="//static/plugins/bootstrapValidator/bootstrapValidator.min.css"/>
    <link href="//static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link href="//static/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="//static/css/index_s.css">
    <link rel="stylesheet" href="//static/css/public.css">
    <link rel="stylesheet" href="//static/css/font-awesome.min.css">
    <link rel="stylesheet" href="//static/css/style.css">
</head>
<body style="background-color:#eee">
<div id="app" style="margin-top: 10px">
    <div class="float-clear">
        <div class="float-left contentBox border-all"
             style="width:75.5%;margin: 0 0.5%;">
            <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="/core/secondSupply/equipmentDetailOne"
                    frameborder="0" data-id="/core/secondSupply/equipmentDetailOne" seamless></iframe>
        </div>
        <div class="float-left contentBox border-all"
             style="width:23%;">
            <div class="col-md-12">
                <div class="widget navy-bg no-padding">
                    <div style="padding: 5px;">
                        <div style="font-size: 30px">
                            1,540
                            <span style="font-size: 13px;"> m³</span>
                        </div>
                        <h4 style="position: absolute; bottom: 6px;right: 24px;z-index: 100;font-size: 12px;">
                            日累计流量
                        </h4>
                    </div>
                    <div class="flot-chart" style="height: 40px;">
                        <div class="flot-chart-content" id="flot-chart1"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="widget navy-bg no-padding">
                    <div style="padding: 5px;">
                        <div style="font-size: 30px">
                            1,540
                            <span style="font-size: 13px;"> Kwh</span>
                        </div>
                        <h4 style="position: absolute; bottom: 6px;right: 24px;z-index: 100;font-size: 12px;">
                            日累计能耗
                        </h4>
                    </div>
                    <div class="flot-chart" style="height: 40px;">
                        <div class="flot-chart-content" id="flot-chart2"></div>
                    </div>
                </div>
            </div>
            <!--压力表-->
            <div class="float-clear">
                <div id="rightCharGauge2" class="float-left" style="width: 50%;height: 150px;"></div>
                <div id="rightCharGauge3" class="float-left" style="width: 50%;height: 150px;"></div>
                <div id="rightCharGauge4" class="float-left" style="width: 50%;height: 150px;"></div>
                <div id="rightCharGauge5" class="float-left" style="width: 50%;height: 150px;"></div>
            </div>
            <!--警告-->
            <!--头部信息-->
            <div class="float-clear border-all" style="background-color: #a0b7ce;">
                <div class="float-left text-center border-right"
                     style="width: 30%;height: 30px;line-height: 30px;">
                    <span>警告</span>
                </div>
                <div class="float-left text-center" style="width: 70%;height: 30px;line-height: 30px;">
                    <span>详情</span>
                </div>
            </div>
            <!--警告主体-->
            <div class="border-all" style="overflow: auto;height: 31%;">
                <div class="text-center" v-if="pending">正在努力地加载数据中，请稍候……</div>
                <div class="text-center" v-if="dangerList.length==0 && !pending">没有找到匹配的记录</div>
                <div class="float-clear border-bottom" v-for="item in dangerList">
                    <div class="float-left text-center"
                         style="width: 30%;height: 30px;line-height: 30px;overflow: hidden;">
                        <span>{{item.name}}</span>
                    </div>
                    <div class="float-left text-center"
                         style="width: 70%;height: 30px;line-height: 30px;overflow: hidden;">
                        <span>{{item.description}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="//static/js/vue.min.js"></script>
<script src="//static/js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="//static/js/echarts.min.js"></script>
<!--flot-->
<script type="text/javascript" src="//static/plugins/flot/jquery.flot.js"></script>
<script type="text/javascript" src="//static/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script type="text/javascript" src="//static/plugins/flot/jquery.flot.resize.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            oldIndex: 0,
            pending: false,
            dangerList: [],
        },
        created: function () {
            this.pending = true;
            setTimeout(function () {
                var index = 0;
                for (var i = 0; i < 10; i++) {
                    index++;
                    vm.dangerList.push(
                        {
                            no: index,
                            name: '警告' + index,
                            description: '详情 ' + index
                        }
                    );
                }
                vm.pending = false;
            }, 500)
        }
    });

    //跳转到详情三级页面
    function jump() {
        window.location.href = "logon.html";
    }

    $(document).ready(function () {
        $(".contentBox").css({"height": $(document.body).height() - 20});
        $(window).resize(function () {//当浏览器大小变化时
            $(".contentBox").css({"height": $(document.body).height() - 20})
        });
    })
</script>
<!--仪表盘图表-->
<script type="text/javascript">
    //    方块绘制图标
    var d1 = [[1262304000000, 6], [1264982400000, 3057], [1267401600000, 20434], [1270080000000, 31982], [1272672000000, 26602], [1275350400000, 27826], [1277942400000, 24302], [1280620800000, 24237], [1283299200000, 21004], [1285891200000, 12144], [1288569600000, 10577], [1291161600000, 10295]];
    var d2 = [[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 6129], [1272672000000, 11643], [1275350400000, 19055], [1277942400000, 30062], [1280620800000, 39197], [1283299200000, 37000], [1285891200000, 27000], [1288569600000, 21000], [1291161600000, 17000]];

    var data1 = [
        {label: "Data 1", data: d1, color: '#17a084'},
        {label: "Data 2", data: d2, color: '#127e68'}
    ];
    $.plot($("#flot-chart1"), data1, {
        xaxis: {
            tickDecimals: 0
        },
        series: {
            lines: {
                show: true,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 1
                    }, {
                        opacity: 1
                    }]
                }
            },
            points: {
                width: 0.1,
                show: false
            }
        },
        grid: {
            show: false,
            borderWidth: 0
        },
        legend: {
            show: false
        }
    });
    $.plot($("#flot-chart2"), data1, {
        xaxis: {
            tickDecimals: 0
        },
        series: {
            lines: {
                show: true,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 1
                    }, {
                        opacity: 1
                    }]
                }
            },
            points: {
                width: 0.1,
                show: false
            }
        },
        grid: {
            show: false,
            borderWidth: 0
        },
        legend: {
            show: false
        }
    });
    //右侧图表2
    var rightCharGauge2 = document.getElementById("rightCharGauge2");
    var rightCharGauge3 = document.getElementById("rightCharGauge3");
    var rightCharGauge4 = document.getElementById("rightCharGauge4");
    var rightCharGauge5 = document.getElementById("rightCharGauge5");
    var myChartRight2 = echarts.init(rightCharGauge2);
    var myChartRight3 = echarts.init(rightCharGauge3);
    var myChartRight4 = echarts.init(rightCharGauge4);
    var myChartRight5 = echarts.init(rightCharGauge5);
    rightCharOption2 = {
        toolbox: {},
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                max: 1.2,
                radius: "100%",                  //仪表盘半径
                detail: {                   //数据样式
                    formatter: '{value}MPa',
                    fontSize: 12,                 //字体大小
                },
                pointer: {                   //指针样式
                    width: 5
                },
                axisLine: {                     //仪表盘轴线样式
                    lineStyle: {
                        width: 13
                    }
                },
                axisLabel: {                     //刻度标签
                    show: false,
                },
                data: [{value: 0.5, name: '出口压力'}]
            }
        ]
    };
    rightCharOption3 = {
        toolbox: {},
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                max: 5000,
                radius: "100%",                  //仪表盘半径
                detail: {                   //数据样式
                    formatter: '{value} m³',
                    fontSize: 12,                 //字体大小
                },
                pointer: {                   //指针样式
                    width: 5
                },
                axisLine: {                     //仪表盘轴线样式
                    lineStyle: {
                        width: 13
                    }
                },
                axisLabel: {                     //刻度标签
                    show: false,
                },
                data: [{value: 800, name: '出口流量'}]
            }
        ]
    };
    rightCharOption4 = {
        toolbox: {},
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                max: 600,
                radius: "100%",                  //仪表盘半径
                detail: {                   //数据样式
                    formatter: '{value}V',
                    fontSize: 12,                 //字体大小
                },
                pointer: {                   //指针样式
                    width: 5
                },
                axisLine: {                     //仪表盘轴线样式
                    lineStyle: {
                        width: 13
                    }
                },
                axisLabel: {                     //刻度标签
                    show: false,
                },
                data: [{value: 380, name: '电压'}]
            }
        ]
    };
    rightCharOption5 = {
        toolbox: {},
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                max: 180,
                radius: "100%",                  //仪表盘半径
                detail: {                   //数据样式
                    formatter: '{value}A',
                    fontSize: 12,                 //字体大小
                },
                pointer: {                   //指针样式
                    width: 5
                },
                axisLine: {                     //仪表盘轴线样式
                    lineStyle: {
                        width: 13
                    }
                },
                axisLabel: {                     //刻度标签
                    show: false,
                },
                data: [{value: 110, name: '电流'}]
            }
        ]
    };
    myChartRight2.setOption(rightCharOption2, true);
    myChartRight3.setOption(rightCharOption3, true);
    myChartRight4.setOption(rightCharOption4, true);
    myChartRight5.setOption(rightCharOption5, true);
    setInterval(function () {
        rightCharOption2.series[0].data[0].value = (Math.random() * 1).toFixed(2) - 0;
        myChartRight2.setOption(rightCharOption2, true);
        myChartRight3.setOption(rightCharOption3, true);
        myChartRight4.setOption(rightCharOption4, true);
        myChartRight5.setOption(rightCharOption5, true);
    }, 2000);
</script>
</body>
</html>